<!DOCTYPE html>
<html>
	<head>
		<meta charset="Unicode">
		<title>用户信息注册</title>
		<script type="text/javascript">
			function focusBBg(id)
			{
				id.style.backgroundColor = "#CEC1B0";
			}
			document.ondragstart = function() 
			{
    			return false; 
			}
			function blurUser(id)
			{
				var user = id.value;
				var userLab = document.getElementById("userLab");
				
				if(user == "")
				{
					userLab.innerHTML = "昵称不能为空";
					return false;
				}
				for(var i = 0 ; i < user.length ; i++)
				{
					var j = user.substring(i, i+1)
					if(j == " ")
					{
						userLab.innerHTML = "昵称中不能包含空格";
						return false;
					}
					id.style.backgroundColor = "white";
					userLab.innerHTML = "";
					return true;
				}
			}
			function blurphone(id)
			{
				var phone = id.value;
				var phoneLab = document.getElementById("phoneLab");
				
				if(phone == "")
					{
						phoneLab.innerHTML = "电话不能为空";
						return false;
					}
					id.style.backgroundColor = "white";
					phoneLab.innerHTML = "";
					return true;
			}
			function bluradd(id)
			{
				var add = id.value;
				var addLab = document.getElementById("addLab");
				
				if(add == "")
					{
						addLab.innerHTML = "地址不能为空";
						return false;
					}
					id.style.backgroundColor = "white";
					addLab.innerHTML = "";
					return true;
			}
			function blurMail(id)
			{
				var mail = id.value;
				var mailLab = document.getElementById("mailLab");
				var regEmail = /^\w+@\w+.[A-Za-z]{2,3}(.[A-Za-z]{2,3})?$/;
				
				if(regEmail.test(mail))
				{
					id.style.backgroundColor = "white";
					mailLab.innerHTML = "";
					return true;
				}
				else
				{
					mailLab.innerHTML = "Email格式输入不正确";
					return false;
				}
//				if(mail == "")
//				{
//					mailLab.innerHTML = "Email不能为空";
//					return false;
//				}
//				if(mail.indexOf("@") == -1)
//				{
//					mailLab.innerHTML = "Emai格式不正确";
//					return false;
//				}
//				if(mail.indexOf(".") == -1)
//				{
//					mailLab.innerHTML = "Emai格式不正确";
//					return false;
//				}
//				id.style.backgroundColor = "white";
//				mailLab.innerHTML = "";
//				return true;
			}
			function blurPwd(id)
			{
				var pwd = id.value;
				var repwd = document.getElementById("txtrepassword").value;
				var pwdLab = document.getElementById("pwdLab");
				var repwdLab = document.getElementById("repwdLab");
				
				if(pwd == "")
				{
					pwdLab.innerHTML = "密码不能为空";
					return false;
				}	
				if(pwd.length < 6 || pwd.length > 16)
				{
					pwdLab.innerHTML = "密码长度不符合标准";
					return false;
				}
				if(pwd != repwd)
				{
					repwdLab.innerHTML = "两次输入密码不一致&nbsp;请重新输入";
					return false;
				}
				id.style.backgroundColor = "white";
				pwdLab.innerHTML = "";
				repwdLab.innerHTML = "";
				return true;
			}
			function blurRePwd(id)
			{
				var pwd = document.getElementById("txtpassword").value;
				var repwd = id.value;
				var pwdLab = document.getElementById("pwdLab");
				var repwdLab = document.getElementById("repwdLab");
				
				if(repwd == "")
				{
					pwdLab.innerHTML = "请确认输入的密码";
					return false;
				}
				if(repwd != pwd)
				{
					repwdLab.innerHTML = "两次输入密码不一致&nbsp;请重新输入";
					return false;
				}
				id.style.backgroundColor = "white";
				pwdLab.innerHTML = "";
				repwdLab.innerHTML = "";
				return true;
			}
			function blurCom(id)
			{
				var com = id.value;
				var comLab = document.getElementById("comLab");
				
				if(com == "")
					{
						comLab.innerHTML = "自我评定不能为空";
						return false;
					}
					id.style.backgroundColor = "white";
					comLab.innerHTML = "";
					return true;
			}
			function LimitTextArea(field)
			{
				maxlimit=240; 
				if (field.value.length > maxlimit)
				{
					field.value = field.value.substring(0, maxlimit);
				}
			}
			function all_in_all()
			{
				var i = 7;
				var userLab = document.getElementById("userLab");
				var phoneLab = document.getElementById("phoneLab");
				var addLab = document.getElementById("addLab");
				var mailLab = document.getElementById("mailLab");
				var pwdLab = document.getElementById("pwdLab");
				var repwdLab = document.getElementById("repwdLab");
				var comLab = document.getElementById("comLab");
				
				if(userLab.innerHTML == "") i--;
				if(phoneLab.innerHTML == "") i--;
				if(addLab.innerHTML == "") i--;
				if(mailLab.innerHTML == "") i--;
				if(pwdLab.innerHTML == "") i--;
				if(repwdLab.innerHTML == "") i--;
				if(comLab.innerHTML == "") i--;
				
				if(!i) return true;
				return false;
			}
			
//			function validate()
//			{
//						
//				var user = document.getElementById("txtName").value;
//				var phone = document.getElementById("txtPhone").value;
//				var add = document.getElementById("txtAdd").value;
//				var mail = document.getElementById("txtMail").value;
//				var pwd = document.getElementById("txtpassword").value;
//				var repwd = document.getElementById("txtrepassword").value;
//				var sltgrade = document.getElementById("sltgrade");
//				var comarea = document.getElementById("commentarea").value;
//				
//				if(user == "")
//				{
//					alert("昵称不能为空！");
//					return false;
//				}
//				if(phone == "")
//				{
//					alert("电话不能为空！");
//					return false;
//				}
//				if(add == "")
//				{
//					alert("地址不能为空！");
//					return false;
//				}
//				if(mail == "")
//				{
//					alert("邮箱不能为空！");
//					return false;
//				}
//				if(mail.indexOf("@") == -1)
//				{
//					alert("Emai格式不正确！");
//					return false;
//				}
//				if(mail.indexOf(".") == -1)
//				{
//					alert("Emai格式不正确！");
//					return false;
//				}
//				if(pwd == "")
//				{
//					alert("密码不能为空！");
//					return false;
//				}
//				if(pwd.length < 6 || pwd.length > 16)
//				{
//					alert("密码长度不符合标准！");
//					return false;
//				}
//				if(repwd != pwd)
//				{
//					alert("两次输入密码不一致\n请重新输入！");
//					return false;
//				}
//				if(sltgrade.selectedIndex == 0)
//				{
//					alert("请选择学历！");
//					return false;
//				}
//				if(comarea == "")
//				{
//					alert("自我评定不能为空！");
//					return false;
//				}
//				return true;
//			}
			
		</script>
		<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
				background:url(img/晨光.jpg) no-repeat fixed;
				-ms-user-select:none; 
				-moz-user-select: none;
				-webkit-user-select: none;
			}
			#TopBar{
				width: 1920px;
				height: 37.5px;
				color: white;
				text-shadow: 2px 2px 5px #EDF8FC;
				font-size: larger;
				font-family:  "Algerian";
				line-height: 40px;
				text-align: center;
				background: black;
			}
			.maintab{ 
				position:absolute; 
				top:37.5px; 
				left:37.5px;
				padding: 12px;
				width:600px;
				height: 660px;
				color: white;
				font-weight: 100;
				font-family: "黑体";
				border-radius: 0px 0px 180px 0px;
				background: -ms-linear-gradient(-90deg, #5188A6, #80A6B3, #F2C1A3, #AFA791, #436166, #032A40);
				opacity: 0.85;
				box-shadow:3px 3px 5px black;
			}
		</style>
	</head>
	<body onsubmit="return all_in_all()">
		<div id="TopBar">
			<label> From&nbsp;&nbsp;Z_Poorwizard</label>
		</div>
			<form action="" method="get"> <!--onsubmit="return validate()"-->
			<table class="maintab" cellpadding="0" cellspacing="35px" border="0">
				<tr><td colspan="2">
					<label>昵称:</label>&nbsp;&nbsp;&nbsp;
					<input type="text" id="txtName" name="txtName" onfocus="focusBBg(this)" onblur="blurUser(this)"
						style="border-radius: 10px;box-shadow:1px 1px 3px black;" />
					<label id="userLab" style="font-size: x-small;"><font color="red">&nbsp;*</font></label>
				</td></tr>
				<tr><td colspan="2">
					<label>电话:</label>&nbsp;&nbsp;&nbsp;
					<input type="number" id="txtPhone" name="txtPhone" onfocus="focusBBg(this)" onblur="blurphone(this)"
						style="border-radius: 10px;box-shadow:1px 1px 3px black;"/>
					<label id="phoneLab" style="font-size: x-small;"><font color="red">&nbsp;*</font></label>
				</td></tr>
				<tr><td colspan="2">
					<label>地址:</label>&nbsp;&nbsp;&nbsp;
					<input type="text" id="txtAdd" name="txtAdd" onfocus="focusBBg(this)" onblur="bluradd(this)"
						style="border-radius: 10px;box-shadow:1px 1px 3px black;"/>
					<label id="addLab" style="font-size: x-small;"><font color="red">&nbsp;*</font></label>
				</td></tr>
				<tr><td colspan="2">
					<label>邮箱:</label>&nbsp;&nbsp;&nbsp;
					<input type="email" id="txtMail" name="txtMail" onfocus="focusBBg(this)" onblur="blurMail(this)"
						style="border-radius: 10px;box-shadow:1px 1px 3px black;"/>
					<label id="mailLab" style="font-size: x-small;"><font color="red">&nbsp;*</font></label>
				</td></tr>
				<tr><td colspan="2">
					<label>输入密码:</label>&nbsp;&nbsp;&nbsp;
					<input type="password" id="txtpassword" name="txtpassword" onfocus="focusBBg(this)" onblur="blurPwd(this)"
						style="border-radius: 10px;box-shadow:1px 1px 3px black;"/>
					<label id="pwdLab" style="font-size: x-small;"><font color="red">&nbsp;*</font>(密码长度不能低于6位，最高可输入16位)</label>
				</td></tr>
				<tr><td colspan="2">
					<label>确认密码:</label>&nbsp;&nbsp;&nbsp;
					<input type="password" id="txtrepassword" name="txtrepassword" onfocus="focusBBg(this)" onblur="blurRePwd(this)" 
						style="border-radius: 10px;box-shadow:1px 1px 3px black;"/>
					<label id="repwdLab" style="font-size: x-small;"><font color="red">&nbsp;*</font></label>
				</td></tr>
				<tr>
					<td colspan="2">
						<label>学历:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select id="sltgrade" name="sltgrade" style="box-shadow:1px 1px 2px black;">
										<option value="lowest">————请选择学历————</option>
										<option value="lower">高中</option>
										<option value="vocational">大专</option>
										<option value="undergraduate">本科</option>
										<option value="master">硕士</option>
										<option value="doctor">博士或博士以上学历</option>
								</select>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<label>兴趣:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="checkbox" id="txtHappy1" name="happy" value="1" style="box-shadow:1px 1px 3px black;"/><label for="txtHappy1">编程建模</label>
									<input type="checkbox" id="txtHappy2" name="happy" value="2" style="box-shadow:1px 1px 3px black;"/><label for="txtHappy2">电子游戏</label>
									<input type="checkbox" id="txtHappy3" name="happy" value="3" style="box-shadow:1px 1px 3px black;"/><label for="txtHappy3">绘图设计</label>
									<input type="checkbox" id="txtHappy4" name="happy" value="4" style="box-shadow:1px 1px 3px black;"/><label for="txtHappy4">音乐制作</label>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<label>个人简历:</label>&nbsp;
						<input type="file" id="fileSave" name="fileSave" style="width: 340px; box-shadow:1px 1px 3px black; background-color: white;"/>
					</td>
				</tr>
				<tr><td colspan="2">
						<label style="vertical-align: top;">自我评定:</label>&nbsp; 
						<textarea   id="commentarea" 
									onfocus="focusBBg(this)" 
									onblur="blurCom(this)" 
									onKeyDown="LimitTextArea(this)" 
									onKeyUp="LimitTextArea(this)" 
									onkeypress="LimitTextArea(this)" 
							style=" padding-bottom: 60px;
									width: 360px; height: 90px;
									color: #032A40;
									overflow-y: hidden;
									box-shadow:3px 3px 3px black;
									border-radius: 0px 0px 50px 0px;"
									title="此区域限制输入240字"
						></textarea>
						<br /><label id="comLab" style="font-size: x-small; margin-left: 100px;"><font color="red">&nbsp;*</font></label>
				</td></tr>
				<tr>
					<td colspan="2">
						<label>性别:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						
						<label for="unKnow">保密事项</label>
						<input type="radio" id="unKnow" name="txtSex" value="0" checked="checked"/>
						&nbsp;&nbsp;
						<label for="female">女性</label>
						<input type="radio" id="female" name="txtSex" value="1" />
						&nbsp;&nbsp;
						<label for="male">男性</label>
						<input type="radio" id="male" name="txtSex" value="2" />
						
						<font color="red" style="font-size: x-small;">&nbsp;*</font>
					</td>
				</tr>
				<tr>
					<td align="right">
						<input type="submit" id="btnSubMit" name="btnSubMit" value="注册" style="color: #436166; border-radius: 10px; box-shadow:3px 3px 3px black;"/>
					</td>
	 				<td>
	 					<input type="reset" id="btnReset" name="btnReset" value="重置" style="color: #436166; border-radius: 10px; box-shadow:3px 3px 3px black;"/>
	 				</td>
				</tr>
			</table>
			</form>
	</body>
</html>